<template>
  <div class="welcome_component">
    <!-- <div style="text-align: center;position: absolute;width: 100%;top: 50%;transform: translateY(-50%);">
      <img :src="`./public/img/welcome.png`" alt="">
    </div> -->
    <!-- 头部 -->
    <div
      class="head_box"
      style="background-image: url('./public/img/welcome/bj_home.jpg');"
    >
      <div class="head_box_title">欢迎进入宿舍管理系统</div>
      <div class="head_box_desc">从基本情况、教职工人员类别、来源、职称、年龄、政治面貌、年龄分布、性别组成维度对学校及各单位教职工组成情况进行统计。</div>
    </div>
    <!-- 统计 -->
    <div class="tj_box">
      <div class="tj_item">
        <div class="tj_item_box linear_1">
          <div class="tj_item_container">
            <div
            class="tj_item_top"
            style="background-image: url('./public/img/welcome/001.png')"
            >
              <div class="top_title">住宿总人数</div>
              <div class="top_desc">
                <span class="top_num">{{statistical1['count']}}</span>
                <span class="top_unit">人</span>
              </div>
            </div>
            <!-- 进度条信息 -->
            <div class="progress_box">
              <div class="progress_wrap">
                <div 
                class="progress_num progress_linear_1"
                :style="{
                  'width': `${statistical1['width']}%`
                }"
                ></div>
              </div>
              <!-- 描述信息 -->
              <div class="progress_desc">
                <div class="left">男 {{statistical1['男']}}</div>
                <div class="right">女 {{statistical1['女']}}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="tj_item">
        <div class="tj_item_box linear_2">
          <div class="tj_item_container">
            <div
            class="tj_item_top"
            style="background-image: url('./public/img/welcome/002.png')"
            >
              <div class="top_title">床位剩余数量</div>
              <div class="top_desc">
                <span class="top_num">{{statistical2['count']}}</span>
                <span class="top_unit">人</span>
              </div>
            </div>
            <!-- 进度条信息 -->
            <div class="progress_box">
              <div class="progress_wrap">
                <div 
                class="progress_num progress_linear_2"
                :style="{
                  'width': `${statistical2['width']}%`
                }"
                ></div>
              </div>
              <!-- 描述信息 -->
              <div class="progress_desc">
                <div class="left">男 {{statistical2['男']}}</div>
                <div class="right">女 {{statistical2['女']}}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="tj_item">
        <div class="tj_item_box linear_3">
          <div class="tj_item_container">
            <div
            class="tj_item_top"
            style="background-image: url('./public/img/welcome/003.png')"
            >
              <div class="top_title">毕业生床位数量</div>
              <div class="top_desc">
                <span class="top_num">{{statistical3['count']}}</span>
                <span class="top_unit">人</span>
              </div>
            </div>
            <!-- 进度条信息 -->
            <div class="progress_box">
              <div class="progress_wrap">
                <div 
                class="progress_num progress_linear_3"
                :style="{
                  'width': `${statistical3['width']}%`
                }"
                ></div>
              </div>
              <!-- 描述信息 -->
              <div class="progress_desc">
                <div class="left">男 {{statistical3['男']}}</div>
                <div class="right">女 {{statistical3['女']}}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 图表 -->
    <div class="chart_wrap">
      <div class="chart_item">
        <div class="chart_container">
          <div class="title">
            <span>楼宇住宿情况</span>
            <div style="float: right;">
              <el-cascader
                style="width: 160px"
                size="mini"
                expand-trigger="hover"
                :show-all-levels="true"
                v-model="jgValue_1"
                :options="jgTree"
                :props="casProps"
                ref="cas_ref"
                @change="jgChange_1"
              ></el-cascader>
            </div>
          </div>
          <div class="chart_box">
            <div class="chart_draw" ref="chart_ref_1"></div>
          </div>
        </div>
      </div>
      <div class="chart_item">
        <div class="chart_container">
          <div class="title">
            <span>男女比例</span>
            <div style="float: right;">
              <el-cascader
                style="width: 160px"
                size="mini"
                expand-trigger="hover"
                :show-all-levels="true"
                v-model="jgValue_2"
                :options="jgTree"
                :props="casProps"
                ref="cas_ref"
                @change="jgChange_2"
              ></el-cascader>
            </div>
          </div>
          <div class="chart_box">
            <div class="chart_draw">
              <div class="pie_container">
                <div class="pie_left">
                  <div class="chart_draw" style="position: relative;">
                    <div style="position: absolute;top: 0;left: 0;right: 0;bottom: 0;">
                      <div class="chart_draw" ref="chart_ref_2"></div>
                    </div>
                  </div>
                </div>
                <div class="pie_right" style="vertical-align: middle;">
                  <div class="pie_tj_box">
                    <div class="pie_tj_item">
                      <div class="pie_tj_item_left displayTableCell">
                        <img :src="`./public/img/welcome/nan.png`" alt="">
                      </div>
                      <div class="pie_tj_item_right displayTableCell">
                        <div class="pie_item_title">男生人数</div>
                        <div class="pie_item_num">{{pieData['男']}}</div>
                      </div>
                    </div>
                    <div class="pie_tj_item" style="margin-top: 20px;">
                      <div class="pie_tj_item_left displayTableCell">
                        <img :src="`./public/img/welcome/nv.png`" alt="">
                      </div>
                      <div class="pie_tj_item_right displayTableCell">
                        <div class="pie_item_title">女生人数</div>
                        <div class="pie_item_num">{{pieData['女']}}</div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { ChartUtil } from "@/utils/chartUtil.js";
export default {
  data() {
    return {
      casProps: {
        expandTrigger: "hover",
        // checkStrictly: true,
        children: 'child',
        value: "id",
        label: "mc"
      },
      jgValue_1: [],
      jgValue_2: [],
      jgTree: [],
      statistical1: {
        '男': 0,
        '女': 0,
        width: 0,
        count: 0
      },
      statistical2: {
        '男': 0,
        '女': 0,
        width: 0,
        count: 0
      },
      statistical3: {
        '男': 0,
        '女': 0,
        width: 0,
        count: 0
      },
      pieData: {
        '男': 0,
        '女': 0
      }
    };
  },
  mounted () {
    this.getAllData();
  },
  methods: {
    /**
     * @name getAllData
     * @description 获取所有数据
     * @author cjs1992
     * @date 2019-10-10 14:49:06
     */
    async getAllData () {
      this.getStatisticalData();
      Promise.all(
        [this.getXqAndLyTree()]
      ).then(() => {
        // 获取两个图表
        this.getLyZsqkByLyId();
        this.getLyNvblByLyId();
      }).catch((err) => {
        console.log(err);
      });
    },
    /**
     * @name getStatisticalData
     * @description 获取住宿床位信息
     * @author cjs1992
     * @date 2019-10-10 14:48:16
     */
    async getStatisticalData () {
      const res = await this.$store.dispatch('homePage/getStatisticalData');
      const resData = res.data || {};
      for (const key in resData) {
        const obj = resData[key] || [];
        let count = 0;
        let nan = 0;
        for (const item of obj) {
          if (item.name === '男') {
            nan = item.value;
          }
          count += item.value;
          this.$set(this[key], item.name, item.value || 0);
        }
        this.$set(this[key], 'width', nan / count * 100 || 0);
        this.$set(this[key], 'count', count);
      }
    },
    /**
     * @name getXqAndLyTree
     * @description 获取楼宇分类树
     * @author cjs1992
     * @date 2019-10-10 15:19:52
     */
    async getXqAndLyTree () {
      const res = await this.$store.dispatch('homePage/getXqAndLyTree');
      this.jgTree = res.data || [];
      // 设置jgValue_1和jgValue_2
      if (res.data[0] && res.data[0].child.length) {
        const arr = [res.data[0].id, res.data[0].child[0].id];
        this.jgValue_1 = arr;
        this.jgValue_2 = arr;
      }
    },
    /**
     * @name getLyZsqkByLyId
     * @description 获取楼宇住宿情况
     * @author cjs1992
     * @date 2019-10-10 16:07:43
     */
    async getLyZsqkByLyId () {
      this.$addEmptyImg(this.$refs.chart_ref_1);
      if (this.jgValue_1.length !== 2) {
        return;
      }
      const lyId = this.jgValue_1[1];
      const res = await this.$store.dispatch('homePage/getLyZsqkByLyId', {
        lyId
      });
      if (!res.data || !res.data.length) {
        return;
      }
      try {
        res.data.sort((a, b) => {
          return Number.parseInt(a.name) - Number.parseInt(b.name);
        });
      } catch (error) {
        console.log(error, '排序错误');
      }
      // 画图
      let xAxis = [],
      series = [];
      let end = 0;
      res.data.map((item) => {
        xAxis.push(item.name);
        series.push(item)
      })
      // 每页10条
      end = (1000 / series.length) || 10;
      ChartUtil.drawBar({
        _this: this,
        dom: this.$refs.chart_ref_1,
        legend: [],
        xAxis: xAxis,
        barBorderRadius: [10, 10, 0, 0],
        series: [
          {
            type: "bar",
            color: '#00d897',
            barMaxWidth: 20,
            data: series
          }
        ],
        dataZoom: {
          show: true,
          realtime: true,
          start: 0,
          end: end,
        },
        rotate: 30,
        grid: {
          x: 60,
          y2: 60
        }
      });
    },
    /**
     * @name getLyNvblByLyId
     * @description 获取楼宇住宿男女比例
     * @author cjs1992
     * @date 2019-10-10 16:07:43
     */
    async getLyNvblByLyId () {
      this.$addEmptyImg(this.$refs.chart_ref_2);
      if (this.jgValue_2.length !== 2) {
        return;
      }
      const lyId = this.jgValue_2[1];
      const res = await this.$store.dispatch('homePage/getLyNvblByLyId', {
        lyId
      });
      if (!res.data || !res.data.length) {
        return;
      }
      res.data.map((item) => {
        this.$set(this.pieData, item.name, item.value || 0);
      })
      // 饼图
      ChartUtil.drawPie({
        _this: this,
        dom: this.$refs.chart_ref_2,
        series: [
          {
            type: "pie",
            radius: ['50%', '80%'],
            data: res.data,
            color: ['#00c58a', '#fea858'],
            label: {
              formatter: '{b}\n{d}%',
              position: 'inner',
              // width: 76,
              // height: 76,
              // backgroundColor: '#fff',
              // borderColor: '#aaa',
              // borderWidth: 0,
              // borderRadius: 38,
              // rich: {}
            }
          }
        ]
      });
    },
    /**
     * @name jgChange_1
     * @description 
     * @author cjs1992
     * @date 2019-10-10 15:27:28
     */
    jgChange_1 () {
      this.getLyZsqkByLyId();
    },
    /**
     * @name jgChange_2
     * @description 
     * @author cjs1992
     * @date 2019-10-10 15:27:28
     */
    jgChange_2 () {
      this.getLyNvblByLyId();
    },
  },
};
</script>
<style lang="scss" scoped>
.linear_3 {
  background: -webkit-linear-gradient(
    left,
    #3aa9f6,
    #39e2e0
  ); /* Safari 5.1 - 6.0 */
  background: -o-linear-gradient(
    right,
    #3aa9f6,
    #39e2e0
  ); /* Opera 11.1 - 12.0 */
  background: -moz-linear-gradient(
    right,
    #3aa9f6,
    #39e2e0
  ); /* Firefox 3.6 - 15 */
  background: linear-gradient(to right, #3aa9f6, #39e2e0);
  /* 标准的语法（必须放在最后） */
  filter: progid:DXImageTransform.Microsoft.gradient(GradientType=1, startColorstr=#3aa9f6, endColorstr=#39e2e0); /*IE<9>*/
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient (GradientType=1, startColorstr=#3aa9f6, endColorstr=#39e2e0)";
  /*IE8+*/
}
.linear_2 {
  background: -webkit-linear-gradient(
    left,
    #ff8d02,
    #fbd600
  ); /* Safari 5.1 - 6.0 */
  background: -o-linear-gradient(
    right,
    #ff8d02,
    #fbd600
  ); /* Opera 11.1 - 12.0 */
  background: -moz-linear-gradient(
    right,
    #ff8d02,
    #fbd600
  ); /* Firefox 3.6 - 15 */
  background: linear-gradient(to right, #ff8d02, #fbd600);
  /* 标准的语法（必须放在最后） */
  filter: progid:DXImageTransform.Microsoft.gradient(GradientType=1, startColorstr=#ff8d02, endColorstr=#fbd600); /*IE<9>*/
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient (GradientType=1, startColorstr=#ff8d02, endColorstr=#fbd600)";
  /*IE8+*/
}
.linear_1 {
  background: -webkit-linear-gradient(
    left,
    #03d895,
    #acd865
  ); /* Safari 5.1 - 6.0 */
  background: -o-linear-gradient(
    right,
    #03d895,
    #acd865
  ); /* Opera 11.1 - 12.0 */
  background: -moz-linear-gradient(
    right,
    #03d895,
    #acd865
  ); /* Firefox 3.6 - 15 */
  background: linear-gradient(to right, #03d895, #acd865);
  /* 标准的语法（必须放在最后） */
  filter: progid:DXImageTransform.Microsoft.gradient(GradientType=1, startColorstr=#03d895, endColorstr=#acd865); /*IE<9>*/
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient (GradientType=1, startColorstr=#03d895, endColorstr=#acd865)";
  /*IE8+*/
}
.progress_linear_1 {
  background: -webkit-linear-gradient(
    left,
    #90ebc1,
    #fff
  ); /* Safari 5.1 - 6.0 */
  background: -o-linear-gradient(
    right,
    #90ebc1,
    #fff
  ); /* Opera 11.1 - 12.0 */
  background: -moz-linear-gradient(
    right,
    #90ebc1,
    #fff
  ); /* Firefox 3.6 - 15 */
  background: linear-gradient(to right, #90ebc1, #fff);
  /* 标准的语法（必须放在最后） */
  filter: progid:DXImageTransform.Microsoft.gradient(GradientType=1, startColorstr=#90ebc1, endColorstr=#fff); /*IE<9>*/
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient (GradientType=1, startColorstr=#90ebc1, endColorstr=#fff)";
  /*IE8+*/
}
.progress_linear_2 {
  background: -webkit-linear-gradient(
    left,
    #feae47,
    #fff
  ); /* Safari 5.1 - 6.0 */
  background: -o-linear-gradient(
    right,
    #feae47,
    #fff
  ); /* Opera 11.1 - 12.0 */
  background: -moz-linear-gradient(
    right,
    #feae47,
    #fff
  ); /* Firefox 3.6 - 15 */
  background: linear-gradient(to right, #feae47, #fff);
  /* 标准的语法（必须放在最后） */
  filter: progid:DXImageTransform.Microsoft.gradient(GradientType=1, startColorstr=#feae47, endColorstr=#fff); /*IE<9>*/
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient (GradientType=1, startColorstr=#feae47, endColorstr=#fff)";
  /*IE8+*/
}
.progress_linear_3 {
  background: -webkit-linear-gradient(
    left,
    #72c6fa,
    #fff
  ); /* Safari 5.1 - 6.0 */
  background: -o-linear-gradient(
    right,
    #72c6fa,
    #fff
  ); /* Opera 11.1 - 12.0 */
  background: -moz-linear-gradient(
    right,
    #72c6fa,
    #fff
  ); /* Firefox 3.6 - 15 */
  background: linear-gradient(to right, #72c6fa, #fff);
  /* 标准的语法（必须放在最后） */
  filter: progid:DXImageTransform.Microsoft.gradient(GradientType=1, startColorstr=#72c6fa, endColorstr=#fff); /*IE<9>*/
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient (GradientType=1, startColorstr=#72c6fa, endColorstr=#fff)";
  /*IE8+*/
}
.welcome_component {
  .border_boxShadow {
    border: 1px solid transparent;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  }
  // background: #f5f6fa;
  padding: 20px 1.64%;
  height: 100%;
  .head_box {
    height: 130px;
    background-color: #fff;
    border-radius: 8px;
    background-repeat: no-repeat;
    background-position: right bottom;
    padding-left: 34px;
    .head_box_title {
      font-size: 20px;
      color: #07bea2;
      font-weight: 600;
      padding-top: 35px;
    }
    .head_box_desc {
      font-size: 12px;
      color: #a0acc1;
      margin-top: 18px;
    }
  }
  div.tj_box {
    width: 100%;
    display: table;
    margin-top: 20px;
    .tj_item {
      display: table-cell;
      width: 33.33%;
      // border-radius: 8px;
      padding: 0 10px;
      box-sizing: border-box;
      vertical-align: top;
      .tj_item_box {
        height: 160px;
        border-radius: 8px;

        // background: #fff;
        .tj_item_container {
          padding: 0 36px;
          .tj_item_top {
            height: 100px;
            background-repeat: no-repeat;
            background-position: right bottom;
            .top_title {
              color: #fff;
              font-size: 14px;
              padding-top: 30px;
            }
            .top_desc {
              margin-top: 10px;
              .top_num {
                font-size: 30px;
                color: #fff;
                font-weight: 600;
              }
              .top_unit {
                font-size: 14px;
                color: #fff;
              }
            }
          }
          .progress_box {
            margin-top: 10px;
            .progress_wrap {
              height: 10px;
              background: rgba(255, 255, 255, 0.3);
              border-radius: 5px;
              .progress_num {
                border-radius: 5px;
                height: 10px;
              }
            }
            .progress_desc {
              height: 30px;
              line-height: 30px;
              .left {
                float: left;
                color: #fff;
              }
              .right {
                float: right;
                color: #fff;
              }
            }
          }
        }
      }
      &:first-child {
        padding-left: 0;
      }
      &:last-child {
        padding-right: 0;
      }
    }
  }
  .chart_wrap {
    display: table;
    width: 100%;
    height: 330px;
    margin-top: 20px;
    .chart_item {
      width: 50%;
      display: table-cell;
      vertical-align: top;
      &:first-child {
        padding-right: 10px;
      }
      &:last-child {
        padding-left: 10px;
      }
      .chart_container {
        height: 330px;
        background-color: #fff;
        padding: 20px;
        .title {
          height: 36px;
          span {
            font-weight: 600;
            color: #344563;
            font-size: 16px;
          }
        }
        position: relative;
        .chart_box {
          position: absolute;
          left: 20px;
          right: 20px;
          bottom: 20px;
          top: 60px;
          .chart_draw {
            width: 100%;
            height: 100%;
          }
        }
      }
    }
    .pie_container {
      display: table;
      width: 100%;
      height: 100%;
      .pie_left, .pie_right {
        width: 50%;
        height: 100%;
        vertical-align: top;
        display: table-cell;
      }
      .pie_tj_box {
        padding: 0 20px;
        .pie_tj_item {
          height: 96px;
          border: 1px solid #ecebeb;
          border-radius: 8px;
          display: table;
          width: 100%;
          .pie_tj_item_left {
            width: 50%;
            min-width: 70px;
            text-align: center;
          }
          .pie_tj_item_right {
            .pie_item_title {
              font-size: 14px;
              color: #767f8d;
            }
            .pie_item_num {
              margin-top: 10px;
              color: #364064;
              font-size: 16px;
            }
          }
          &>.displayTableCell {
            display: table-cell;
            height: 94px;
            vertical-align: middle;
          }
        }
      }
    }
  }
}
</style>